<template>
  <div v-loading="qLoading" style="line-height:1.8">
    <div v-if="qType==1||qType==2||qType==3||qType==4||qType==5">
      <div v-if="qType==1" >
        <div class="q-title" v-html="question.title"/>
        <div class="q-content">
          <el-radio-group v-model="answer.content">
            <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix" >
              <span class="question-prefix">{{item.prefix}}.</span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-else-if="qType==2" >
        <div class="q-title" v-html="question.title"/>
        <div class="q-content">
          <el-checkbox-group v-model="answer.contentArray" >
            <el-checkbox v-for="item in question.items" :label="item.prefix" :key="item.prefix" >
              <span class="question-prefix">{{item.prefix}}.</span>
              <span v-html="item.content"  class="q-item-span-content"></span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div v-else-if="qType==3" >
        <div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/>
        <span style="padding-right: 10px;">(</span>
        <el-radio-group v-model="answer.content">
          <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix">
            <span v-html="item.content" class="q-item-span-content"></span>
          </el-radio>
        </el-radio-group>
        <span style="padding-left: 10px;">)</span>
      </div>
      <div v-else-if="qType==4" >
        <div class="q-title" v-html="question.title"/>
        <div v-if="answer.contentArray!==null">
          <el-form-item :label="item.prefix" :key="item.prefix"  v-for="item in question.items"  label-width="50px" style="margin-top: 10px;margin-bottom: 10px;">
            <el-input v-model="answer.contentArray[item.prefix-1]"  />
          </el-form-item>
        </div>
      </div>
      <div v-else-if="qType==5">
        <div class="q-title" v-html="question.title"/>
        <div>
          <el-input  v-model="answer.content" type="textarea" rows="5" ></el-input>
        </div>
      </div>
     
        <br/>
      <div class="question-answer-show-item" style="line-height: 1.8" >
        <span class="question-show-item">分数：</span>
        <span>{{question.score}}</span>
      </div>
      <div class="question-answer-show-item">
        <span class="question-show-item">难度：<el-rate disabled v-model="question.difficult" class="question-show-item"></el-rate></span>
      </div>
      <div class="question-answer-show-item" style="line-height: 1.8">
        <span class="question-show-item">解析：</span>
        <span v-html="question.analyze" class="q-item-span-content" />
      </div>
      <div class="question-answer-show-item">
        <span class="question-show-item">正确答案：</span>
        <span v-if="qType==1||qType==2 ||qType==5" v-html="question.correct" class="q-item-span-content"/>
        <span v-if="qType==3" v-html="trueFalseFormatter(question)" class="q-item-span-content"/>
        <span v-if="qType==4">{{question.correctArray}}</span>
      </div>
      <div>
             <el-button type="primary" v-if="answer.isCollect === false" size="mini"  @click="collect(question.id)" class="link-left"  >收藏</el-button>
              <el-button v-if="answer.isCollect===true" size="mini"  disabled class="link-left"  >已收藏</el-button>
              <el-button type="primary" size="mini" @click="modify(question.id)">添加解析</el-button>
      </div>
    </div>
    <div v-else>
    </div>

      <el-dialog title="解析" :visible.sync="modifyVisible">
      <el-form
        :model="analyzeFrom"
        :rules="rules"
        ref="analyzeFrom"
        label-width="70px"
        label-position="right"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="个人解析" prop="analyze" size="medium">
          <el-input v-model="analyzeFrom.applyAnalyze" class="filter-item" placeholder="请输入个人解析"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>



</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { save} from '@/api/exam/questionCollect'
import { addAnaly} from '@/api/exam/questionAnaly'

export default {
    data(){
        return{
            analyzeFrom:{
                questionId:null,
                applyAnalyze:''
            },
                 modifyVisible: false,
                  rules: {
        name: [
          { required: true, message: '个人解析必填', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
       
      },
        }
    },
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    answer: {
      type: Object,
      default: function () {
        return { id: null, content: '', contentArray: [], doRight: false,isCollect:false }
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    trueFalseFormatter (question) {
      return question.items.filter(d => d.prefix === question.correct)[0].content
    },
    doRightTagFormatter (status) {
      return this.enumFormat(this.doRightTag, status)
    },
    doRightTextFormatter (status) {
      return this.enumFormat(this.doRightEnum, status)
    },
     modify(questionId) {
      this.modifyVisible = true;
        this.analyzeFrom.questionId = questionId;
    },
    submitForm() {
      // 保存
      this.$refs["analyzeFrom"].validate(valid => {
        if (valid) {
          let para = this.analyzeFrom;
          addAnaly(para).then(res => {
            this.modifyVisible = false;
          });
        } else {
          return false;
        }
      });
    },
      collect(id) {
      if (id) {
       
        save(id).then(res => {
          if (res.result) {
            
          } else {
            this.$message.error(res.code);
          }
        });
      } else {
        // this.questionForm.id=null
        this.questionForm.name = null;
        // this.questionForm.password=null
        this.questionForm.status = "1";
        // this.questionForm.erpFlag= "0"
      }
    },
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      doRightEnum: state => state.exam.question.answer.doRightEnum,
      doRightTag: state => state.exam.question.answer.doRightTag
    })
  }
}
</script>
